<template>
  <div class="upload-video">
    <el-upload
      ref="upload"
      :action="actionUrl"
      list-type="picture-card"
      :before-upload="beforeUploadVideo"
      :on-success="uploadSuccess"
      :limit="limit"
      :headers="headers"
      :show-file-list="false"
      :file-list="fileArray"
    >
      <div v-if="!videoPath" class="add-box">
        <i slot="default" class="el-icon-video-camera-solid icon-video" />
        <span class="el-upload-title">{{ placeholder }}</span>
      </div>
      <div v-else class="video-box">
        <i slot="default" type="primary" class="el-icon-remove icon-remove" @click.stop="handleRemove" />
        <video :src="videoPath" class="video-avatar" controls="controls">您的浏览器不支持视频播放</video>
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'UploadVideo',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: '',
      required: false
    },
    url: {
      type: String,
      default: 'common/file/upload',
      required: false
    },
    placeholder: {
      type: String,
      default: '上传视频',
      required: false
    }
  },
  data() {
    return {
      limit: 1,
      fileArray: []
    }
  },
  computed: {
    actionUrl: function() {
      return `${process.env.VUE_APP_BASE_API}/${this.url}`
    },
    headers() {
      // const token = this.$ls.get('TOKEN')
      const token = this.$getXmStorage('XM_COLOR')
      const head = { 'Authorization': `Bearer ${token}` }
      return head
    },
    videoPath: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('change', val)
      }
    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    // 上传前钩子
    beforeUploadVideo(file) {
      const fileSize = file.size / 1024 / 1024 < 50
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) === -1) {
        this.$message.warning('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$message.warning('视频大小不能超过50MB')
        return false
      }
      return true
    },
    // 上传成功的回调
    uploadSuccess(response, file, fileList) {
      if (file.status === 'success') {
        const fileIitem = {
          name: file.name,
          url: file.response.data
        }
        this.fileArray.push(fileIitem)
        this.videoPath = file.response.data
      }
    },
    clearFiles() {
      this.$refs.upload.clearFiles()
    },
    // 删除
    handleRemove() {
      this.fileArray = []
      this.videoPath = ''
    }
  }
}
</script>
<style scoped lang='scss'>
.upload-video {
  ::v-deep .el-upload {
    width: 100px;
    height: 100px;
    position: relative;
    .el-upload-title {
      color: #777b85;
      font-size: 14px;
      display: inline-block;
      line-height: 50px;
    }
  }
  .add-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon-video {
      margin-top: 20px;
      display: block;
    }
  }
  .video-box {
    position: relative;
    .icon-remove {
      position: absolute;
      right: 2px;
      top: 2px;
      color: red;
      z-index: 1000;
    }
    .video-avatar {
      width: 100px;
      height: 100px;
    }
  }
}
</style>

